@import "base.scss";
@import "mixin.scss";

.SY-wrapper {
    //SY-leftNav
    .SY-leftNav {
        width: 12 * $fontSize10 + 6;
        padding:0 $fontSize12 / 2;
        background: $colorfff;
        .title {
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize16;
            color: $color666;
            background: $colordc;
            margin:$fontSize10 / 2 0;
        }
        .item {
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            padding: $fontSize10 / 2 0;
            font-size: $fontSize14;
            a {
                display: block;
                line-height: 4 * $fontSize10;
                border-left: $fontSize12 / 2 solid $colorfff;
            }
            .num {
                font-size: $fontSize12;
                margin-left: $fontSize12 / 2;
            }
            &:hover a {
                color: $theme;
            }
            &.active a {
                color: $theme;
                border-color: $theme;
            }
        }
    }
    //SY-ListBox
    .SY-ListBox {
        width: 101 * $fontSize10 + 3;
        padding:3 * $fontSize10 $fontSize20;
        background: $colorfff;
        .listNav {
            padding-bottom: $fontSize12;
            margin-bottom: $fontSize14 + 1;
            border-bottom: 1px solid $colore5;
            .title {
                font-size: $fontSize16;
                color: $color111;
            }
        }
        .sortBox {
            > a {
                display: block;
                margin-top: $fontSize10 / 5;
                font-size: $fontSize14;
                &:hover {
                    color: $color111;
                }
                i {
                    font-size: $fontSize16;
                    margin-left: $fontSize12 / 3;
                }
            }
            .select {
                top: $fontSize20 + 5;
                right: 0;
                width: 13 * $fontSize10;
                font-size: $fontSize14;
                background: $colorfff;
                @include boxShadow(0 0 $fontSize18 rgba(0,0,0,.16));
                z-index: 99;
                .item {
                    height: 2 * $fontSize18;
                    line-height: 2 * $fontSize18;
                    padding:0 $fontSize14;
                    &:hover {
                        background: #f3f3f3;
                    }
                    a {
                        color: $colorab;
                    }
                    &.active a {
                        color: $theme;
                    }
                }
            }
        }
        .userList {
            .item {
                display: inline-block;
                width: 24 * $fontSize10 + 3;
                height: 18 * $fontSize10 + 2;
                margin:0 $fontSize10 $fontSize12 0;
                overflow: hidden;
                &:nth-child(4n) {
                    margin-right: 0;
                }
            }
            .user-msg {
                height: 13 * $fontSize10 + 6;
                padding-left: 0;
            }
            .user-cover {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            .cover {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                @include linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65));
                z-index: 5;
            }
            .detail {
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9;
            }
            .avatar {
                width: 4 * $fontSize10;
                height: 4 * $fontSize10;
                margin:$fontSize14 + 1 auto 0;
                @include border($fontSize10 / 5,solid,$colorfff);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .nickName {
                font-size: $fontSize14;
                line-height: $lineHeight;
                margin:$fontSize12 / 4 auto;
                max-width: 22 * $fontSize10;
                @include link-colors($colorea,$colorfff);
            }
            .user-desc {
                font-size: $fontSize12;
                line-height: $lineHeight;
                height: $fontSize18;
                margin:0 auto $fontSize12 / 2;
                max-width: 22 * $fontSize10;
                color: $colorea;
            }
            .datas a {
                width: 32%;
                font-size: $fontSize12;
                @include link-colors($colorea,$colorfff);
                .num {
                    margin-left: $fontSize12 / 4;
                }
            }
            .btns {
                a {
                    height: $fontSize20 + 5;
                    line-height: $fontSize20 + 5;
                    font-size: $fontSize12;
                    margin-top: $fontSize10;
                    &:hover {
                        border-color: $color666;
                    }
                    @include border($fontSize10 / 10,solid,$colore5);
                }
                .followBtn {
                    width: 9 * $fontSize10;
                    margin-right: $fontSize16;
                    i {
                        margin-right: $fontSize12 / 3;
                    }
                    &.active {
                        background: $colore5;
                        &:hover {
                            border-color: $colore5;
                        }
                    }
                }
                .sendLetterBtn {
                    width: 7 * $fontSize10 + 5;
                }
            }
            .loading {
                padding: 12 * $fontSize10 0;
                font-size: $fontSize16;
                color: $colorab;
            }
            .page {
                float: left;
                width: 100%;
            }
        }
        .emptyInfo {
            padding:10 * $fontSize10 0 12 * $fontSize10;
            .icon {
                width: 11 * $fontSize10 + 1;
                height: 10 * $fontSize10 + 5;
                margin: 0 auto $fontSize14 + 1;
                background-image: url("../img/icons/info.png");
                background-repeat: no-repeat;
                background-position: - 33 * $fontSize10 0;
            }
            .tips {
                font-size: $fontSize14;
                color: $color666;
                line-height: $lineHeight;
                a {
                    text-decoration: underline;
                    @include link-colors($theme,$darkTheme);
                }
            }
        }
    }
}
